<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="备料清单" name="first">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance" />
          <el-button type="primary" class="btn" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          v-loadmore="loadmore"
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="300px"
        />
        <el-tabs v-model="activeName1" type="card" style="margin-top: 5px">
          <el-tab-pane label="管材" name="first" />
          <el-tab-pane label="布料" name="second" />
          <el-tab-pane label="五金" name="third" />
          <el-tab-pane label="木板" name="fourth" />
          <el-tab-pane label="岩板" name="five" />
          <el-tab-pane label="座板" name="sex" />
          <el-tab-pane label="海绵" name="ten" />
        </el-tabs>
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="呆滞库存清单" name="second">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance" />
          <el-button type="primary" class="btn" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          v-loadmore="loadmore"
          :table-data="tableData1"
          :table-header="tableHeader1"
          table-height="300px"
        />
        <el-tabs v-model="activeName2" type="card" style="margin-top: 5px">
          <el-tab-pane label="管材" name="first" />
          <el-tab-pane label="布料" name="second" />
          <el-tab-pane label="五金" name="third" />
          <el-tab-pane label="木板" name="fourth" />
          <el-tab-pane label="岩板" name="five" />
          <el-tab-pane label="座板" name="sex" />
          <el-tab-pane label="海绵" name="ten" />
        </el-tabs>
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="盘点异常清单" name="third">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance" />
          <el-button type="primary" class="btn" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          :table-data="tableData2"
          :table-header="tableHeader2"
          table-height="336px"
        />
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="仓库异常报表" name="fourth">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance" />
          <el-button type="primary" class="btn" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
        </div>
        <jc-table
          :table-data="tableData3"
          :table-header="tableHeader3"
          table-height="336px"
        />
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'

export default {
  components: {
    search
  },
  mixins: [searData],
  data() {
    return {
      ftype: 0,
      tableData: [],
      tableHeader: [ // 备料
        { label: '计划领料时间', prop: 'fdata' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion' },
        { label: '所在仓库', prop: 'fstock' },
        { label: '可用库存数', prop: 'fqty' },
        { label: this.$t('market.funit'), prop: '' },
        { label: '领料数', prop: '' },
        { label: '实际领料数', prop: '' },
        { label: '差异', prop: '' },
        { label: '领料车间', prop: '' },
        { label: this.$t('market.pickstatus'), prop: '' },
        { label: '发料时间', prop: '' },
        { label: '领料人', prop: '' },
        { label: '发料人', prop: '' }
      ],
      tableData1: [],
      tableHeader1: [ // 呆滞库存清单
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion' },
        { label: '所在仓库', prop: 'fstock' },
        { label: '可用库存数', prop: 'fqty' },
        { label: this.$t('market.funit'), prop: '' },
        { label: '入库时间', prop: '' },
        { label: '库龄', prop: '' },
        { label: '批次号', prop: '' },
        { label: this.$t('market.order'), prop: '' },
        { label: this.$t('market.purOrderNo'), prop: '' },
        { label: this.$t('market.staff'), prop: '' }
      ],
      tableData2: [],
      tableHeader2: [ // 盘点异常清单
        { label: '批次号', prop: '' },
        { label: '入库时间', prop: '' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion' },
        { label: this.$t('market.rukufqty'), prop: '' },
        { label: '实际数量', prop: '' },
        { label: '差异', prop: '' },
        { label: this.$t('market.funit'), prop: '' },
        { label: '所在仓库', prop: '' },
        { label: this.$t('market.stocker'), prop: '' }
      ],
      tableData3: [],
      tableHeader3: [ // 仓库异常报表
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion' },
        { label: this.$t('market.rukufqty'), prop: '' },
        { label: '实际数量', prop: '' },
        { label: '差异', prop: '' },
        { label: this.$t('market.funit'), prop: '' },
        { label: '异常状态', prop: '' },
        { label: '所在仓库', prop: '' },
        { label: this.$t('market.stocker'), prop: '' }
      ],
      activeName: 'first',
      activeName1: '',
      activeName2: '',
      currentPage: 1,
      size: 200,
      total: 0
    }
  },
  watch: {
    // 监听切换选项卡
    activeName(val) {
      this.tableData = []
      this.LargeCode = val
      // this.balance()
    }
  },
  created() {
    this.balance()
  },
  methods: {
    loadmore() {
      this.currentPage++
      this.balance()
    },
    // 仓库原材料实时数据结存表
    balance() {
      // const DATA = {
      //   pageNum: this.currentPage,
      //   pageSize: this.size,
      //   search: this.searCollData,
      //   fnumber: this.LargeCode
      // }
      // queryRealTimeDataBalance(DATA).then(res => {
      //   if (res.code === 0) {
      //     this.tableData.push(...res.data.array)
      //     this.total = res.data.total
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="scss">
.header-name {
  position: relative;
  top: -5px;
  margin-bottom: 10px;
  .btn {
    margin-left: 450px;
    transform: translateY(18%);
  }
}
</style>

